<template>
  <div class="pf-flex pf-flex-column">
    <div class="pf-flex pf-top">
      <div class="pf-top-logo pf-flex">
        <img class="pf-vertical-middle" :src="(logo as any)" />
        <span class="pf-top-title">{{ title }}</span>
      </div>
      <div class="pf-flex pf-flex-1 pf-ai-center pf-white">
        <div class="pf-flex-1">
          <el-button class="pf-vertical-middle" link type="primary" @click="collapse = !collapse">
            <i
              class="pf-fs-40 pf-white"
              :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            ></i>
          </el-button>
        </div>
        <el-dropdown class="el-dropdown-link">
          <span style="color: white; margin-right: 10px"
            >{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i
          ></span>
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="updateUserInfo">个人信息</el-dropdown-item>
              <el-dropdown-item @click="updatePwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="changeTenant">切换租户</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="pf-content pf-flex">
      <el-menu
        class="pf-content-menu"
        :default-active="activeMenuId"
        @open="handleOpen"
        @close="handleClose"
        :collapse="collapse"
      >
        <template v-for="menu in menus" :key="menu.menuId">
          <DMenu :menu="menu" :base-path="menu.menuUrl"></DMenu>
        </template>
      </el-menu>
      <div class="pf-flex pf-flex-column pf-flex-1 pf-w-0">
        <div class="pf-bgwhite pf-p-5">
          <el-tag
            class="pf-ml-5"
            style="cursor: pointer"
            v-for="c in crumbs"
            :key="c.path"
            :closable="closable(c)"
            @close="tabRemove(c.path)"
            @click="tabClick(c.path)"
            :type="c.path === activeCrumb ? '' : 'info'"
          >
            {{ c.name }}
          </el-tag>
        </div>
        <!--        <el-tabs class="pf-bgwhite" v-model="activeCrumb" :closable="closable" @tab-remove="tabRemove" @tab-click="tabClick">
          <el-tab-pane v-for="c in crumbs" :key="c.path" :label="c.name" :name="c.path"></el-tab-pane>
        </el-tabs>-->
        <slot></slot>
      </div>
    </div>
    <user-info-dialog
      :show="userInfoDialog"
      :user-info="pfUserInfo"
      @close="closeUserInfoDialog"
    ></user-info-dialog>
    <tenant-app-dialog
      :show="tenantAppDialogVis"
      @close="closeTenantAppDialog"
      @change="tenantAppChangeEvent"
    ></tenant-app-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, computed, inject, toRefs } from 'vue';
import { useMenu, Crumb, SysMenu, useAuth } from 'pf-component';
import { isNull } from '../constants/util/objects-utils';
import { useNotice } from '@/components/element-plus/notice';
import { Constants } from '@/constants/constants';
import UserInfoDialog from '@/components/user/UserInfoDialog.vue';
import store from '@/store';
import TenantAppDialog from '@/components/user/TenantAppDialog.vue';
import tenantAppDialog from '@/components/user/TenantAppDialog.vue';
import { initByTenant } from '@/constants/util/init';
import router from '@/router';
export default defineComponent({
  name: 'DLayout',
  computed: {},
  components: { TenantAppDialog, UserInfoDialog },
  props: {
    logo: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: ''
    },
    userName: {
      type: String,
      default: ''
    },
    menuList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  emits: ['tab-click', 'logout', 'menu-open', 'menu-close'],
  setup(props, { emit }) {
    const pfUserInfo = computed(() => {
      return store.getters.pfUserInfo;
    });
    const tenantAppDialogVis = ref(false);
    const closeTenantAppDialog = () => {
      tenantAppDialogVis.value = false;
    };
    const tenantAppChangeEvent = async ({ tenId, appId }: any) => {
      await initByTenant(tenId, appId);
      const index = store.getters['menus/index'];
      index && (await router.push({ name: index.menuCode }));
    };
    const userInfoDialog = ref(false);
    const closeUserInfoDialog = () => {
      userInfoDialog.value = false;
    };
    const updateUserInfo = () => {
      userInfoDialog.value = true;
    };

    const menus: Ref<SysMenu[]> = toRefs(props).menuList as any;
    const collapse: Ref<boolean> = ref(false);
    const crumbs: Crumb[] = inject('crumbs') || [];
    const activeCrumb = inject('activeCrumb');
    const activeMenuId = inject('activeMenuId');
    const homePageCode = computed(() => {
      return store.getters['menus/index'].menuCode;
    });
    const closable = (c: Crumb) => {
      return /*crumbs.length > 1*/ c.component !== homePageCode.value;
    };
    const tabClick = (path: string) => {
      const idx = crumbs.findIndex(c => c.path === path);
      if (path && idx !== -1) {
        emit('tab-click', crumbs[idx]);
      } else {
        emit('tab-click', null);
      }
    };
    const tabRemove = (path: string) => {
      const idx = crumbs.findIndex(e => e.path === path);
      if (idx > -1) {
        crumbs.splice(idx, 1);
        if (path === activeCrumb) {
          tabClick(crumbs[0].path);
        }
      }
    };
    const logout = () => {
      emit('logout');
    };
    const handleOpen = () => {
      emit('menu-open');
    };
    const handleClose = () => {
      emit('menu-close');
    };
    const updatePwd = () => {
      useNotice().message.warning('功能建设中...');
    };
    const changeTenant = () => {
      tenantAppDialogVis.value = true;
    };
    return {
      menus,
      collapse,
      activeMenuId,
      activeCrumb,
      crumbs,
      closable,
      tabClick,
      tabRemove,
      logout,
      handleOpen,
      handleClose,
      pfUserInfo,
      userInfoDialog,
      closeUserInfoDialog,
      updateUserInfo,
      updatePwd,
      changeTenant,
      tenantAppDialogVis,
      closeTenantAppDialog,
      tenantAppChangeEvent
    };
  }
});
</script>

<style scoped lang="scss">
.#{$prefix} {
  &-top {
    height: 50px;
    line-height: 50px;
    background: #1a2938b0;
    &-logo {
      min-width: 200px;
      max-width: 200px;
      text-align: left;
    }
    &-title {
      font-style: oblique;
      font-weight: bold;
      margin-left: -10px;
    }
  }
  &-content {
    height: calc(100vh - 50px);
    &-menu:not(.el-menu--collapse) {
      overflow: auto;
      min-width: 200px;
    }
  }
}
</style>
